<template>
  <div class="top">
    <el-container>
      <el-aside class="logo">
        <img :src="logo" />
      </el-aside>
      <el-main class="main"></el-main>
      <el-aside class="loginOut">
        <el-button type="primary" size="300px"  @click="loginOut">
          <el-icon>
            <switch-button />
          </el-icon>
          退出
        </el-button>

      </el-aside>
    </el-container>
  </div>
</template>

<script setup>
import {removeBackendName, removeBackendToken, removeBackendType, removeBackendUid} from "@/utils/auth";
import {SwitchButton} from "@element-plus/icons-vue";
import logo from "@/assets/images/logo2.png"
import {useRouter} from "vue-router";

const router = useRouter();

const loginOut = () => {
  console.log("退出登录");
  removeBackendUid();
  removeBackendToken();
  removeBackendType();
  removeBackendName();

  router.push({
    path: "/backend/Login"
  });

}
</script>

<style scoped lang="scss" >

  .logo {
    background: lightblue;
    width: 500px;
    height: 100px;
  }
  .main {
    background: lightblue;
    height: 100px;

  }
  .loginOut {
    background: lightblue;
    width: 300px;
    height: 100px;
    text-align: center;
    font-size: 30px;
    line-height: 100px;
    .el-icon{
      font-size: 15px;
    }
  }
</style>